---
breakpoint: tablet
title: useBreakpoint
---

# useBreakpoint

## Import

```js
import { useBreakpoint } from 'bumbag';
```

## Usage

The `useBreakpoint` hook will return a `boolean` depending if the particular breakpoint query is met.

In the example below, `isWidescreenAndUnder` will return truthy if it is under the [max widescreen width viewport](/breakpoints) (1199px).

```function-live
function Example() {
  const isWidescreenAndUnder = useBreakpoint('max-widescreen');
  return <Text fontSize={{ default: '200', 'max-widescreen': '400' }}>{isWidescreenAndUnder ? 'Yes' : 'No'}</Text>;
}
```

## Schema

```js
const doesMatch = useBreakpoint(breakpoint)
```

### Parameters

**<Code marginRight="major-1">breakpoint</Code>** `string`

A valid [breakpoint](/breakpoints) from the theme.

### Return values

**<Code marginRight="major-1">doesMatch</Code>** `boolean`

Returns truthy if the query is matched.
